<template>
  <div class="main-box">
    <el-table
      :data="leaveList"
      border
      style="width: 100%">
      <el-table-column
        fixed prop="leaveId" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="leaveStuId" label="请假人学号" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="请假人姓名" align="center">
      </el-table-column>
      <el-table-column prop="leaveTitle" label="请假名称" align="center"></el-table-column>
      <el-table-column prop="leaveReason" label="请假理由" align="center"></el-table-column>
      <!-- <el-table-column prop="leaveDescription" label="描述信息" align="center" width="260"></el-table-column> -->
      <el-table-column prop="communityName" label="所属社团" align="center"></el-table-column>
      <el-table-column label="请假开始时间" align="center" width="200">
        <template slot-scope="scope">{{scope.row.leaveStartTime | formatDate}}</template>
      </el-table-column>
      <el-table-column label="请假结束时间" align="center" width="200">
        <template slot-scope="scope">{{scope.row.leaveEndTime | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="leaveStatus" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="typeTag[scope.row.leaveStatus]" effect="dark">{{approvalTag[scope.row.leaveStatus]}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="leaveType" label="请假类别" align="center">
        <template slot-scope="scope">
          <el-tag :type="tagStyle[scope.row.leaveType]" effect="dark">{{leaveTag[scope.row.leaveType]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-tooltip :content="'审核结果: ' + approvalTag[scope.row.leaveStatus]" placement="top">
              <el-switch
                v-model="scope.row.leaveStatus"
                active-color="#13ce66"
                inactive-color="#c3ccc7"
                :active-value="1"
                :inactive-value="2"
                @change="approvalLeaveStatus(scope.row)">
              </el-switch>
            </el-tooltip>
            <el-button
              size="mini"
              type="danger"
              style="margin-left: 10%;"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column  align="center" label="请假单">
          <template #default="scope">
           	<el-button
           		type="text"
           		size="medium"
           		v-if="scope.row.leaveStatus == 1"
              @click="handleLeave(scope.$index, scope.row)"
           	>
           		请假单
           	</el-button>
           </template>
        </el-table-column>
      </el-table>


 <!--请假单弹窗-->
     <div class="leave-box">
       <el-dialog :visible.sync="dialogLeaveFormVisible">
         <div id="pdfDom" class="leave-table">
           <h2 class="title">请假单</h2>


         <el-form  ref="leaveInfoForm" :model="row" >
           <el-form-item  label="请假单编号" :label-width="formLabelWidth" prop="leaveId">
             {{row.leaveId}}
           </el-form-item>
           <el-form-item  label="学号" :label-width="formLabelWidth" prop="leaveStuId">
             {{row.leaveStuId}}
           </el-form-item>
           <el-form-item label="姓名" :label-width="formLabelWidth"  prop="userName">
             {{row.userName}}
           </el-form-item>
           <el-form-item label="所属社团" :label-width="formLabelWidth"  prop="communityName" >
             {{row.communityName}}
           </el-form-item>
           <el-form-item label="请假理由" :label-width="formLabelWidth"  prop="leaveReason">
             {{row.leaveReason}}
           </el-form-item>
           <el-form-item label="请假开始时间" :label-width="formLabelWidth" prop="leaveStartTime">
             {{row.leaveStartTime | formatDate}}
           </el-form-item>
           <el-form-item label="请假结束时间" :label-width="formLabelWidth" prop="leaveEndTime">
             {{row.leaveEndTime | formatDate}}
           </el-form-item>
           <el-form-item label="请假审批结果" :label-width="formLabelWidth" disabled prop="leaveStatus">
             {{approvalTag[row.leaveStatus]}}
           </el-form-item>
         </el-form>
         <!-- <table border="2">
           <tr>
         		<td align="center">此处签字</td>
         		<td colspan="20"></td>
         		<td align="center">盖章</td>
         		<td colspan="3"></td>
         	</tr>
          </table> -->
         <p class="desc" align="center">备注：学生请假期间一切责任自负，假期结束后应及时返回学校。</p>
         </div>
         <div align="center">
           <template>
           <span class="dialog-footer">
             <el-button type="primary" @click="getPdf()" size="medium">下载请假单</el-button>
             <el-button type="primary" @click="cancel()" size="medium">取消</el-button>
           </span>
         </template>
         </div>
       </el-dialog>
     </div>

    <!--分页-->
    <div class="pagination-box">
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        :page-sizes="[5, 10, 20, 50, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    import localStorageUtil from "../../../utils/localStorageUtil"
    import { formatDate } from '../../../utils/date'
    // import { LeavePdf } from '../leave_pdf.vue'
    import { mapGetters } from 'vuex'
    export default {
       // components: {  LeavePdf },
        methods: {
            approvalLeaveStatus(row) {
                let { leaveId, leaveStatus } = row;
                let data = {
                    leaveId: leaveId,
                    leaveStatus: leaveStatus
                }
                this.$store.dispatch('leave/approval', data).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '修改已提交',
                            type: 'success'
                        });
                    }
                })
            },
            fetchLeaves() {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    communityId: localStorageUtil.read('SET_USER').userCommunityId
                };
                this.$store.dispatch('leave/findAllByPaging', params).then((res) => {
                    this.leaveList = res.data
                });
                            },
            handleDelete(index, row) {
                this.$confirm(`确认删除：${row.leaveTitle}的请假吗？`)
                    .then(_ => {
                        this.$store.dispatch('leave/removeById', row.leaveId).then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    showClose: true,
                                    message: '删除成功',
                                    type: 'success'
                                })
                            }
                            this.fetchLeaves()
                        })
                    })
                    .catch(_ => {
                        this.$message({
                            showClose: true,
                            message: '已经取消'
                        })
                    });
            },
            /* 获取总记录条数*/
            fetchTotal() {
                this.$store.dispatch('leave/findTotal').then((res) => {
                    this.total = res.data
                })
            },
            /* 每页显示多少条改变时间*/
            handleSizeChange(val) {
                this.pageNum = 1;
                this.pageSize = val;
                this.fetchLeaves()
            },
            /* 页码发生改变时间*/
            handleCurrentChange(val) {
                this.pageNum = val
                this.fetchLeaves()
            },
            /* 请假单弹窗*/
            handleLeave(index, row) {
              this.row = row
              this.dialogLeaveFormVisible = true

              // if (this.row.leaveStatus == 1) {
              // 	this.row.leaveStatus = '已通过'
              // } else if (this.row.leaveStatus == 2) {
              // 	 this.row.leaveStatus = '未通过'
              // }
            },
            cancel(){
            	this.dialogLeaveFormVisible=false
            },
        },
        created() {
            this.fetchLeaves()
            this.fetchTotal()
        },
        filters: {
            /*时间过滤器*/
            formatDate(time) {
                let date = new Date(time - 8 * 3600 * 1000);
                return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');
                
            }
        },
        data() {
            return {
              htmlTitle:'请假单',
                leaveList: [
                    // {
                    //     leaveId: '',
                    //     leaveTitle: '',
                    //     leaveType: '',
                    //     leaveStartTime: '',
                    //     leaveEndTime: '',
                    //     leaveReason: '',
                    //     userId: '',
                    //     userName: '',
                    //     communityName: '',
                    //     leaveStatus: ''
                    // }
                ],
                formLabelWidth: '120px',
                row: {},
                dialogLeaveFormVisible: false,
                genderList: ['男', '女'],
                // leaveFormList:[
                //   {
                //     userName: '',
                //     leaveTitle: '',
                //     leaveType: '',
                //     leaveStartTime: '',
                //     leaveEndTime: '',
                //     leaveReason: '',
                //     leaveStuId: '',
                //     communityName: '',
                //     leaveStatus: ''
                //   }
                // ],
                approvalTag: ['审核中', '已通过审核', '未通过审核'],
                leaveTag: ['病假','事假'],
                typeTag: ['', 'success', 'info'],
                pageNum: 1,
                pageSize: 5,
                total: 5,
                tagStyle: ['success','danger']
            }
        }
    }

</script>

<style>
  .main-box {
    margin: 2% 2%;
  }
  .pagination-box {
    margin: 4% 30%;
  }
.info {
  word-break: break-all;
  display: -webkit-box; /**对象作为伸缩盒子模型展示**/
  -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
  -webkit-line-clamp: 1; /**显示的行数**/
  overflow: hidden; /**隐藏超出的内容**/
}
.leave-table{
	border: solid 1px #333;
	/* // border-collapse: collapse; */
	border-spacing: 0;
	font-size: 14px;
	color: #333;
	width: 100%;

	td{
		border: solid 1px #333;
		padding: 15px;
		height: 38px;
		box-sizing: border-box;
	}

}

.title{
	text-align: center;
	font-size: 24px;
	margin-bottom: 30px;
	margin-top: 10px;
}
</style>
